import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, Renderer2 } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { UtilService } from 'src/app/services/util.service';
import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
  selector: 'app-quick-reply-form',
  templateUrl: './quick-reply-form.component.html',
  styles: [`
  .smile-btn-anchor{font-size:1.185rem;padding: 0 5px;color: #ccc;display:inline-block;vertical-align: middle;}
  .smile-btn-boxes{padding:0!important;display:none;width:270px;}
  .smile-btn-box{margin-right:0}
  .smile-btn{display: inline-block;}
  .smile-btn-boxes-toggle{display: inline-block;}
  `],
  animations: [
    trigger('octrigger', [
      state('openS', style({
        bottom: '0'
      })),
      state('closeS', style({
        bottom: '-221px'
      })),
      transition('openS => closeS', [
        animate('500ms')
      ]),
      transition('closeS => openS', [
        animate('500ms')
      ]),
    ])
  ]
})
export class QuickReplyFormComponent implements OnInit, OnDestroy {
  public data: any = {
    content: '',
    token: '',
    quote: 0,
    scale: ''
  };
  private opened: boolean = false;
  @Input('scale')
  public replyScale!: string;
  @Output('quickReply')
  public quickReplyEvent: EventEmitter<any>;
  //表情图标click侦听函数
  private listenFunc!: any;
  //是否显示emoji图标
  public showEmoji: boolean = false;
  
  constructor(
    private elementRef: ElementRef,
    private renderer2: Renderer2,
    private util: UtilService) {
    this.quickReplyEvent = new EventEmitter<any>();
  }

  ngOnInit(): void {
    this.data.scale = this.replyScale || '640x360';
    this.listenFunc = fromEvent(this.elementRef.nativeElement.querySelectorAll('a.smile-btn'), 'click')
      .pipe(map((val: any) => val.target))
      .subscribe({
        next: res => {
          let smileAnchor = res as HTMLLinkElement;
          this.data.content += smileAnchor.innerText;
        },
        error: err => {
        },
        complete: () => {
          console.log('[QuickReplyForm-CMP]Completed');
        }
      });
  }

  ngOnDestroy(): void {
    this.listenFunc.unsubscribe();
  }

  public toggle(replyId: number = 0) {
    if (this.opened) {
      this.close();
    } else {
      this.openDrawer(replyId);
    }
  }

  //打开抽屉
  public openDrawer(replyId: number = 0): void {
    let bdrawer: HTMLElement = this.elementRef.nativeElement;
    this.renderer2.setStyle(bdrawer.querySelector('.embed_drawer_menu'), 'bottom', '0');
    this.opened = true;
    //赋值
    this.data.token = this.util.randomAlphaNumeric(8) || '123456';
    this.data.quote = replyId;
  }

  //关闭按钮
  public close(): void {
    let bdrawer: HTMLElement = this.elementRef.nativeElement;
    this.renderer2.setStyle(bdrawer.querySelector('.embed_drawer_menu'), 'bottom', '-221px');
    this.opened = false;
    //重置
    this.data.token = '';
    this.data.content = '';
    this.data.quote = 0;
    this.data.scale = '';
  }

  //提交
  public reply(event: Event): void {
    //将表单传递到父组件
    this.quickReplyEvent.emit(this.data);
  }

  //显示表情
  public toggleEmoji(event: Event): void {
    this.showEmoji = !this.showEmoji;
  }
}
